<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>查看供应商信息列表 - 医院药品库存管理系统</title>
		<meta name="description" content="查看供应商信息列表 - 医院药品库存管理系统" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
    <script src="../../../assets/js/vue.js"></script>
    <script src="/assets/js/jquery-2.1.4.min.js"></script>
    <script src="../../../assets/js/axios.js"></script>
<script src="../../../assets/js/xlsx.mini.min.js"></script>
    <style>
      #elevator-navigation {
        position: fixed;
        bottom: 20px;
        right: 100px;
        height: 180px;
        width: 60px;
        display: none;

      }

      #elevator-navigation :nth-child(1) {
        cursor: pointer;
        height: 60px;
        width: 60px;
      }
      #ex{
        list-style-type: none;
        height: 40px;
        width: 340px;
        margin: 10px;
        cursor: pointer;
        position: relative;
        left: 950px;


      }
    </style>

    <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<!-- text fonts -->
		<link rel="stylesheet" href="../../../assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="../../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="../../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- ace settings handler -->
		<script src="../assets/js/ace-extra.min.js"></script>
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
		<!--[if lte IE 8]>
			<script src="../assets/js/html5shiv.min.js"></script>
			<script src="../assets/js/respond.min.js"></script>
		<![endif]-->

	</head>
	<body class="no-skin">
  <div id="navbar" class="navbar navbar-default ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
      <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
        <span class="sr-only">Toggle sidebar</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-header pull-left">
        <a href="../admin/index" class="navbar-brand">
          <small>
            <i class="fa fa-leaf"></i>
            医院药品库存管理系统 DIMS
          </small>
        </a>
      </div>
      <div class="navbar-buttons navbar-header pull-right" role="navigation">
        <ul class="nav ace-nav">
          <li class="grey dropdown-modal">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="ace-icon fa fa-tasks"></i>
              <span class="badge badge-grey">3</span>
            </a>
            <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
              <li class="dropdown-header">
                <i class="ace-icon fa fa-check"></i>
                统计信息
              </li>
              <li class="dropdown-content">
                <ul class="dropdown-menu dropdown-navbar">
                  <li>
                    <a href="../admin/query-specific-admin?Ano=${currentAdmin.ano}">
                      <div class="clearfix">
                        <span class="pull-left">由我入库的药品总批数占比</span>
                        <span class="pull-right" >
                        {{ AllData.comeProportion }}%
													</span>
                      </div>
                      <div class="progress" style="height: 10px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :style="{width:AllData.comeProportion+'%'}" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="../admin/query-specific-admin?Ano=${currentAdmin.ano}">
                      <div class="clearfix">
                        <span class="pull-left">由我入库的库存药品批数占比</span>
                        <span class="pull-right">
   {{ AllData.stockProportion }}%
													</span>
                      </div>
                      <div class="progress" style="height: 10px">
                        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" :style="{width: AllData.stockProportion+'%'}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="../admin/query-specific-admin?Ano=${currentAdmin.ano}">
                      <div class="clearfix">
                        <span class="pull-left">由我销毁的药品批数占比</span>
                        <span class="pull-right">
                         {{ AllData.desProportion }}%
													</span>
                      </div>
                      <div class="progress" style="height: 10px">
                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" :style="{width: AllData.desProportion+'%'}" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="green dropdown-modal">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              <i class="ace-icon fa fa-bell icon-animated-bell"></i>
              <span class="badge badge-success" v-text="AllData.lower+AllData.day"></span>
            </a>
            <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
              <li class="dropdown-header">
                <i class="ace-icon fa fa-exclamation-triangle"></i>
                警报
              </li>
              <li class="dropdown-content">
                <ul class="dropdown-menu dropdown-navbar navbar-pink">
                  <li>
                    <a href="../admin/query-low-inventory-drug-list">
                      <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
														库存药品数量到达下限警报
													</span>
                        <span class="pull-right badge badge-info">{{AllData.lower}}</span>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="../admin/query-close-2-expiry-pdbatch-list">
                      <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
														库存药品批次临期警报
													</span>
                        <span class="pull-right badge badge-success">{{AllData.day}}</span>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="light-blue dropdown-modal">
            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
              <img class="nav-user-photo" src="../assets/images/avatars/Admin.png" alt="头像"/>
              <span class="user-info">
									<small>欢迎，</small>
					    	<p v-text="AllData.name"></p>
								</span>
              <i class="ace-icon fa fa-caret-down"></i>
            </a>
            <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
              <li>
                <a href="../admin/profile">
                  <i class="ace-icon fa fa-user"></i>
                  个人信息
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="../logout">
                  <i class="ace-icon fa fa-power-off"></i>
                  登出
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div><!-- /.navbar-container -->
  </div>
		<div class="main-container ace-save-state" id="main-container">

			<div id="sidebar" class="sidebar responsive ace-save-state">

				<div class="sidebar-shortcuts" id="sidebar-shortcuts">
					<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
						<button class="btn btn-success">
							<i class="ace-icon fa fa-signal"></i>
						</button>
						<button class="btn btn-info">
							<i class="ace-icon fa fa-pencil"></i>
						</button>
						<button class="btn btn-warning">
							<i class="ace-icon fa fa-users"></i>
						</button>
						<button class="btn btn-danger">
							<i class="ace-icon fa fa-cogs"></i>
						</button>
					</div>
					<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
						<span class="btn btn-success"></span>
						<span class="btn btn-info"></span>
						<span class="btn btn-warning"></span>
						<span class="btn btn-danger"></span>
					</div>
				</div><!-- /.sidebar-shortcuts -->
				<ul class="nav nav-list">
					<li class="">
						<a href="../admin/welcome">
							<i class="menu-icon fa fa-tachometer"></i>
							<span class="menu-text"> 欢迎页面 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="">
						<a href="../admin/profile">
							<i class="menu-icon fa fa-tag"></i>
							<span class="menu-text"> 个人信息页面 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="active">
						<a href="../admin/query-supplier-list">
							<i class="menu-icon fa fa-briefcase"></i>
							<span class="menu-text"> 查看供应商信息列表 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="">
						<a href="../admin/add-supplier-form">
							<i class="menu-icon fa fa-desktop"></i>
							<span class="menu-text"> 填写新增供应商表单 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="">
						<a href="../admin/query-low-inventory-drug-list">
							<i class="menu-icon fa fa-cogs"></i>
							<span class="menu-text"> 查看库存紧张的药品 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="">
						<a href="../admin/query-close-2-expiry-pdbatch-list">
							<i class="menu-icon fa fa-exclamation-circle"></i>
							<span class="menu-text"> 查看临期的药品批次 </span>
						</a>
						<b class="arrow"></b>
					</li>
					<li class="">
						<a href="#" class="dropdown-toggle">
							<i class="menu-icon fa fa-list"></i>
							<span class="menu-text"> 查看药品库存信息 </span>
							<b class="arrow fa fa-angle-down"></b>
						</a>
						<b class="arrow"></b>
						<ul class="submenu">
							<li class="">
								<a href="../admin/query-drug-list">
									<i class="menu-icon fa fa-caret-right"></i>
									查看库存药品列表
								</a>
								<b class="arrow"></b>
							</li>
							<li class="">
								<a href="../admin/query-pdbatch-list">
									<i class="menu-icon fa fa-caret-right"></i>
									查看库存药品批次明细
								</a>
								<b class="arrow"></b>
							</li>
							<li class="">
								<a href="../admin/query-destroyed-pdbatch-list">
									<i class="menu-icon fa fa-caret-right"></i>
									查看已销毁药品批次列表
								</a>
								<b class="arrow"></b>
							</li>
						</ul>
					</li>
					<li class="">
						<a href="../admin/add-storage-form">
							<i class="menu-icon fa fa-pencil-square-o"></i>
							<span class="menu-text"> 填写药品入库表单 </span>
						</a>
						<b class="arrow"></b>
					</li>
          <li class="">
            <a href="../admin/add-rx-form">
              <i class="menu-icon fa fa-pencil-square-o"></i>
              <span class="menu-text"> 填写新建处方表单 </span>
            </a>
            <b class="arrow"></b>
          </li>
          <li class="">
            <a href="#" class="dropdown-toggle">
              <i class="menu-icon fa fa-list-alt"></i>
              <span class="menu-text"> 查看处方列表 </span>
              <b class="arrow fa fa-angle-down"></b>
            </a>
            <b class="arrow"></b>
            <ul class="submenu">
              <li class="">
                <a href="../admin/query-unsolved-rx-list">
                  <i class="menu-icon fa fa-caret-right"></i>
                  查看未处理处方列表
                </a>
                <b class="arrow"></b>
              </li>
              <li class="">
                <a href="../admin/query-solved-rx-list">
                  <i class="menu-icon fa fa-caret-right"></i>
                  查看已处理处方列表
                </a>
                <b class="arrow"></b>
              </li>
            </ul>
          </li>
				</ul><!-- /.nav-list -->
				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>
			</div>
			<div class="main-content">
				<div class="main-content-inner">
					<div class="breadcrumbs ace-save-state" id="breadcrumbs">
						<ul class="breadcrumb">
							<li>
								<i class="ace-icon fa fa-home home-icon"></i>
								<a href="../admin/index">首页</a>
							</li>
							<li class="active">查看供应商信息列表</li>
						</ul><!-- /.breadcrumb -->
					</div>
					<div class="page-content">
						<div class="page-header">
							<h1>
								查看供应商信息列表
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									供应商信息列表
								</small>
							</h1>
						</div><!-- /.page-header -->
<!--						<c:choose>-->
<!--							<c:when test="${echo != null}">-->
<!--								<div class="alert alert-info">-->
<!--									<button class="close" data-dismiss="alert">-->
<!--										<i class="ace-icon fa fa-times"></i>-->
<!--									</button>-->
<!--									<i class="ace-icon fa fa-hand-o-right"></i>-->
<!--									${echo}-->
<!--								</div>-->
<!--							</c:when>-->
<!--						</c:choose>-->
						<a href="../admin/add-supplier-form">
							<button class="btn btn-sm btn-primary">
								<i class="ace-icon fa fa-pencil-square-o bigger-110"></i>
								添加供应商记录
								<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
							</button>
						</a>

            <ul id="ex">
              <li> <img src="../../../assets/images/ts/excel.png" title="导出excle文件" width="40px" height="40px"  @click="cel"></li>
            </ul>
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<div class="clearfix">
											<div class="pull-right tableTools-container"></div>
										</div>
										<div class="table-header">
											查询结果
										</div>

										<div>
                      <div style="margin-top: 20px;margin-bottom: 20px">
                      <h5>每页显示&nbsp;
                        <select v-model="navigatePages" @change="page()">
                        <option>5条</option>
                          <option>10条</option>
                          <option>15条</option>
                          <option>20条</option>
                          <option>25条</option>
                          <option>30条</option>
                          <option>35条</option>
                          <option>40条</option>
                          <option>45条</option>
                          <option>50条</option>

                      </select>&nbsp;记录  <span style="position: relative;right: -800px">检索：<input type="text"></span></h5>



                      </div>
											<table id="dynamic-table" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th>供应商编号</th>
														<th>供应商名称</th>
														<th>供应商地址</th>
														<th>供应商电话</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody>
														<tr v-for="(item,index) in obj.list" :key="item.no">
															<td>
																<a href="javaScript:" title="查看该供应商的供货明细" @click="details(item.no)">{{item.no}}</a>
															</td>
															<td>
																<a href="javaScript:" title="查看该供应商的供货明细" @click="details(item.no)">{{item.name}}</a>
															</td>
															<td>{{item.address}}</td>
															<td>{{item.phone}}</td>
															<td>
																<div class="hidden-sm hidden-xs action-buttons">
																	<a class="blue" :href="'/admin/query-specific-supplier?Sno='+item.no" title="查看该供应商的供货明细">
																		<i class="ace-icon fa fa-search-plus bigger-130"></i>
																	</a>
																	<a class="green" :href="'/admin//edit-supplier-form?Sno='+item.no" title="编辑该供应商的具体信息">
																		<i class="ace-icon fa fa-pencil bigger-130"></i>
																	</a>
																</div>
															</td>
														</tr>




												</tbody>
											</table>
										</div>

                    <div class="row">
                      <!--        分页文字信息-->
                      <div class="col-md-10 col-sm-offset-1" >
                        从&nbsp;{{obj.pageNum}}&nbsp;/&nbsp;{{navigatePages  | wipe}}&nbsp;共&nbsp;{{obj.total}}&nbsp;条数据
                      </div>
                      <!--    分页条信息-->

                      <div class="col-md-4 col-md-offset-8" style="position: relative;top: -40px">
                        <nav aria-label="Page navigation example">
                          <ul class="pagination">
                            <li class="page-item" :class="obj.isFirstPage ? 'disabled':''" @click="page(1)">
                              <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">首页</span>
                              </a>
                            </li>
                            <li class="page-item" :class="obj.isFirstPage ? 'disabled':''"
                                @click="obj.hasPreviousPage && page(obj.pageNum - 1)">
                              <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                            </li>
                            <li class="page-item" :class="item===obj.pageNum ? 'active':''" v-for="(item,index) in obj.navigatepageNums"
                                :key="item">
                              <a @click="page($event.target.innerText)" class="page-link" href="#">{{ item }}</a></li>
                            <li class="page-item" :class="obj.isLastPage ? 'disabled':''"
                                @click="obj.hasNextPage && page(obj.pageNum + 1)">
                              <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                            <li class="page-item" :class="obj.isLastPage ? 'disabled':''" @click="page(obj.pages)">
                              <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">末页</span>
                              </a>
                            </li>
                          </ul>
                        </nav>
                      </div>
                    </div>
									</div>
								</div>
								<!-- PAGE CONTENT ENDS -->
                <div id="elevator-navigation">
                  <img src="../../../assets/images/ts/goTop.png" alt="未找到按钮" title="返回顶部">
                  <p style="text-align: center">返回顶部</p>
                </div>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->
			<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">医院药品库存管理系统</span>
							DIMS &copy; 2019-2020
						</span>
					</div>
				</div>
			</div>
			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		<!-- basic scripts -->
    <script>

      $(function () {
        const vm = new Vue({
          el: "#navbar",
          data: {
            AllData: {}
          },
          methods: {
            ms() {
              axios({
                url: "/drug/AdminDate",
                method: "GET",
              }).then(res => {

                this.AllData = res.data;
              })
            }
          }
        })
        vm.ms();
      })



    </script>

    <script>
      $(function () {
        const vm = new Vue({
          el: ".main-container",
          data: {
            obj:{},
            navigatePages:"5条"
          },
          methods: {
getNv(){
  console.log($("select").val())
},
         page(NowPage) {
           axios.get("/supplier/selectAll",{
             params:{
               page:NowPage,
               navigatePages:this.navigatePages
             }
           }).then(res => {
                this.obj = res.data;
              })
            },
            cel(){
              var ws = XLSX.utils.json_to_sheet(this.obj.list);
              var workbook = {
                SheetNames: ['sheet'],
                Sheets: {
                  'sheet': ws
                }
              };
              XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'base64'
              });
              XLSX.writeFile(workbook, '供货商信息.xlsx');
            },


          },
          filters:{
            wipe(str){
            return str.replace("条", "")
            }
          }
        })

        vm.page(1);

        $(window).scroll(function() {
          var top = $(document).scrollTop();
         if(top>=780){
           $("#elevator-navigation").fadeIn()
         }else{
           $("#elevator-navigation").fadeOut();
         }

        });


        $("#elevator-navigation").click(function() {
          $("body,html").animate({
            scrollTop: 0
          })
        })

      })
    </script>
		<!--[if !IE]> -->
			<script src="../assets/js/jquery-2.1.4.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
			<script src="../assets/js/jquery-1.11.3.min.js"></script>
		<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<!-- page specific plugin scripts -->
		<script src="../assets/js/jquery.dataTables.min.js"></script>
		<script src="../assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="../assets/js/dataTables.buttons.min.js"></script>
		<script src="../assets/js/buttons.flash.min.js"></script>
		<script src="../assets/js/buttons.html5.min.js"></script>
		<script src="../assets/js/buttons.print.min.js"></script>
		<script src="../assets/js/buttons.colVis.min.js"></script>
		<script src="../assets/js/dataTables.select.min.js"></script>
		<!-- ace scripts -->
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<!-- inline scripts related to this page -->

	</body>
</html>
